<template>
  <el-tooltip :content="'连接状态: ' + (state === 'online' ? '在线' : state === 'reconnecting' ? '重连中' : '离线'  )" placement="top">
  <div class="server-state">
    <font-awesome-icon :icon="['fas' , 'link']" :style="{ color: state === 'online' ? '#67c23a' : state === 'reconnecting' ? '#f5a623' : '#f56c6b' }" />
  </div>
  </el-tooltip>
</template>

<script>
import { natsClient } from "@/utils/nats_client";

export default {
  name: "ServiceLink",
  data() {
    return {
      state: 'offline' // 默认状态为离线
    }
  },
  methods: {
    natsConnectionListener(state) {
      console.log("nats state => ", state);
      if (state.type === "pingTimer") {
        this.state = 'online';
      } else if (state.type === "disconnect") {
        this.state = 'offline';
      } else if (state.type === "reconnect") {
        this.state = 'reconnecting';
      }else if (state.type === 'reconnecting'){
        this.state = 'reconnecting';
      }
    }
  },
  mounted() {
    this.state = natsClient.isActive() ? 'online' : 'offline';
    natsClient.addConnectionListener(this.natsConnectionListener);
  }
}
</script>

<style scoped>
.server-state {
  font-size: 15px;
  display: flex;
  align-items: center;
}

</style>